<template>
	<div class="goods-info">
		<div class="goods-title">
			<span></span>
		</div>
		<div class="goods-desc">
			<div class="goods-price">
				<span class="now-price">{{Goods.realPrice}}</span>
				<span class="before-price">{{Goods.oldPrice}}</span>
				<span class="discount">{{Goods.discount}}</span>
			</div>
			<div class="goods-num">
				<span v-for="item in Goods.columns">{{item}}</span>
			</div>
		</div>
		<div class="goods-server">
			<span v-for="item in Goods.services">
				<i class="iconfont icon-duigou"></i>
				{{item.name}}
			</span>
		</div>
	</div>
</template>

<script>
	export default{
		name:'GoodsInfo',
		props:{
			Goods:Object
		},
		
	}
</script>

<style scoped>
	.goods-info {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: center;
		padding: 14px;
		width: 100vw;
	}
	.goods-title span{
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-weight: bold;
		font-size: 0.533333rem;
		line-height: 0.64rem;
	}
	.goods-desc {
		padding: 14px 0;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	
	.now-price {
		font-size: 0.64rem;
		color:deeppink;
	}
	.before-price {
		font-size: 0.32rem;
		text-decoration: line-through;
		padding-left: 0.133333rem;
		color: #999;
	}
	.discount {
		margin: -10px 0 0 0.133333rem;
		font-size: 0.48rem;
		padding: 0.053333rem 0.213333rem;
		border-radius: 10px;
		color:#fff;
	}
	.goods-num ,.goods-server{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0.8rem 0 0;
	}
	.goods-num span{
		font-size: 0.373333rem;
		color:#999;
	}
	.goods-server {
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		font-size: 0.426666rem;
		width: 100%;
	}
	.goods-server span {
		position: relative;
		margin-left: 0.266666rem;
		margin-right: 0.48rem;
	}
	.goods-server span i {
		position: absolute;
		left: -0.38rem;
		top: 0;
		right: 0;
	}
</style>
